<div class="login-page">
  <div class="banner">
  </div>
  <div class="login-panel" (keypress)="enter($event, loginForm)">

    <div *ngIf="errorMessage" [ngClass]="{'fadeIn': showMessage}"
         class="alert alert-danger animated"
         role="alert">
      {{ errorMessage }}
      <button type="button" class="close" (click)="hideErrorMessage()">
        <span>&times;</span>
      </button>
    </div>

    <form #loginForm="ngForm" class="login-form">
      <div class="form-group input-group animated fadeInDown">
        <div class="input-group-prepend">
          <span class="input-group-text fa fa-user"></span>
        </div>
        <input title="username" type="text" class="form-control" required
               ngModel #username="ngModel" name="username">
      </div>

      <div class="form-group input-group animated fadeInUp" id="password">
        <div class="input-group-prepend">
          <span class="input-group-text fa fa-key"></span>
        </div>
        <input title="password" type="password" #password="ngModel" class="form-control" required
               ngModel
               name="password">
      </div>
      <div class="form-group input-group animated flipInX">
        <button [disabled]="!loginForm.valid" class="btn btn-sm"
                (click)="login(loginForm)">登录
        </button>
      </div>
    </form>
  </div>

  <app-copyright class="d-block"></app-copyright>
</div>
